<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<!--头部-->
<head th:fragment="head(myTitle)">
    <!-- 字符集设置 -->
    <meta charset="UTF-8">
    <!--移动端的：缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 网页标题 -->
    <title th:text="${myTitle}">L1w31の博客</title>
    <!-- x-icon设置 -->
    <link href="java.ico" rel="shortcut icon" type="image/x-icon" th:href="@{/images/favicon.png}"/>
    <!-- semantic ui css引用 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"
          th:href="@{/css/semantic.css}">
    <!-- 自设样式css引用 -->
    <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
    <!-- typo 标签样式css引用 -->
    <link rel="stylesheet" href="../static/css/typo.css" th:href="@{/css/typo.css}">
    <!-- animate 动画样式css引用 -->
    <link rel="stylesheet" href="../static/css/animate.css" th:href="@{/css/animate.css}">
    <!-- prism 代码高亮css引用 -->
    <link rel="stylesheet" href="../static/lib/prism/prism.css" th:href="@{/lib/prism/prism.css}">
    <!-- tocbot 目录样式css引用 -->
    <link rel="stylesheet" href="../static/lib/tocbot/tocbot.css" th:href="@{/lib/tocbot/tocbot.css}">
    <!-- 音乐播放器css引用 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
    <!-- pjax 局部刷新样式css引用 -->
    <link rel="stylesheet" href="../static/css/pjax.css" th:href="@{/css/pjax.css}">
</head>

<body>
<!-- 导航栏 -->
<nav th:fragment="nav(choose)" class="m-nav">
    <div class="ui container">
        <div class="ui inverted secondary stackable menu">
            <h2 class="ui teal header item">L1w31's Blog</h2>
            <a th:href="@{/}" class="m-item item m-mobile-hide"
               th:classappend="${choose == 1} ? 'active'"><i class="home icon"></i>首页</a>
            <a th:href="@{/frontend/types/-1}" class="m-item item m-mobile-hide"
               th:classappend="${choose == 2} ? 'active'"><i class="idea icon"></i>分类</a>
            <a th:href="@{/frontend/archives}" class="m-item item m-mobile-hide"
               th:classappend="${choose == 3} ? 'active'"><i class="clone icon"></i>归档</a>
            <a th:href="@{/frontend/about}" class="m-item item m-mobile-hide"
               th:classappend="${choose == 4} ? 'active'"><i class="info icon"></i>关于我</a>
            <a th:href="@{/frontend/login}" target="_blank" class="m-item item m-mobile-hide"
               th:classappend="${choose == 5} ? 'active'"><i class="user circle icon"></i>登录</a>
            <div class="right m-item item m-mobile-hide">
                <form name="search" action="#" th:action="@{/frontend/search}" method="post" target="_blank">
                    <div class="ui transparent input icon m-margin-tb-tiny" style="color:white">
                        <input style="color: white" type="text" name="query" placeholder="Search..."
                               th:value="${query}">
                        <i onclick="document.forms['search'].submit()" class="search link icon"></i>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <a href="#" class="ui menu toggle black icon button m-top-right m-mobile-show">
        <i class="sidebar icon"></i>
    </a>
</nav>

<!--底部footer-->
<footer th:fragment="footer" class="ui inverted  vertical segment m-padded-tb-massive m-opacity-small">

    <!--引入网易云音乐播放器插件，固定右下角显示,歌单4864025307-->
    <!--    <div id="netEasy-music" style="display:none;position: fixed;bottom: -45px;right: 280px;width: 0%;z-index:9999" >-->
    <!--        <iframe frameborder="no" border="0" marginwidth="0"-->
    <!--                marginheight="0" width=280 height=300-->
    <!--                src="http://music.163.com/outchain/player?type=0&id=4864025307&auto=0">-->
    <!--        </iframe>-->
    <!--    </div>-->
    <div class="ui center aligned container">
        <div class="ui inverted divided stackable grid">
            <div class="four wide column">
                <div class="ui inverted link list">
                    <div class="item">
                        <img src="../static/images/xdd.jpg" th:src="@{/images/dog.jpg}"
                             class="ui rounded image" alt="" style="width: 110px;">
                    </div>
                </div>
            </div>
            <div class="four wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced">联系我</h4>
                <div class="ui inverted link list">
                    <p class="m-text-thin m-text-spaced m-opacity-tiny">WeChat：Leevve7</p>
                    <p class="m-text-thin m-text-spaced m-opacity-tiny">QQ：738258629</p>
                    <p class="m-text-thin m-text-spaced m-opacity-tiny">Email：liweibot@163.com</p>
                </div>
            </div>
            <div class="eight wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced">Blog</h4>
                <div class="ui inverted link list">
                    <p class="m-text-thin m-text-spaced m-opacity-tiny">这是我的个人博客、记录我的学习、工作和生活，欢迎大家来访...</p>
                </div>
            </div>
        </div>
        <div class="ui inverted section divider"></div>
        <p class="m-text-thin m-text-spaced m-padded-tb-small m-opacity-tiny">
            Copyright © 2020 -<span th:text="${#dates.year(#dates.createNow())}">2021</span>
            &nbsp;Blog Website&nbsp;Designed by L1w31
        </p>
        <div class="m-text-thin m-text-spaced m-padded-tb-small">
            <img src="/img/new/gongan.png" th:src="@{/images/gongan.jpg}" style="vertical-align: sub; width: 18px">
            <span style="color: #969797 !important;">京公网安备(在备ing...)号</span>
            <a class="police" href="http://beian.miit.gov.cn" target="_blank"
               style="color: #969797;">京ICP备2021027967号-1</a>
        </div>
        <div style="color: teal;" class="ui vertical m-margin-top-larger m-text-thin m-text-spaced m-mobile-clear">
            <span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span> (*๓´╰╯`๓)
        </div>
        <!-- 运行时间统计 -->
        <script>
            var now = new Date();

            function createtime() {
                var grt = new Date("9/6/2021 0:0:00");//在此处修改你的建站时间，格式：月/日/年 时:分:秒
                now.setTime(now.getTime() + 250);
                days = (now - grt) / 1000 / 60 / 60 / 24;
                dnum = Math.floor(days);
                hours = (now - grt) / 1000 / 60 / 60 - (24 * dnum);
                hnum = Math.floor(hours);
                if (String(hnum).length == 1) {
                    hnum = "0" + hnum;
                }
                minutes = (now - grt) / 1000 / 60 - (24 * 60 * dnum) - (60 * hnum);
                mnum = Math.floor(minutes);
                if (String(mnum).length == 1) {
                    mnum = "0" + mnum;
                }
                seconds = (now - grt) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
                snum = Math.round(seconds);
                if (String(snum).length == 1) {
                    snum = "0" + snum;
                }
                document.getElementById("timeDate").innerHTML = "本小站已安全运行 " + dnum + " 天 ";
                document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
            }
            setInterval("createtime()", 500);
        </script>
    </div>
</footer>

<!-- js引用 -->
<th:block th:fragment="script">
    <!-- jquery js引用 -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"
            th:src="@{/js/admin/jquery.min.js}"></script>
    <!-- semantic ui js引用 -->
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"
            th:src="@{/js/semantic.js}"></script>
    <!-- waypoint js引用 -->
    <script src="https://cdn.jsdelivr.net/npm/waypoints@4.0.1/lib/jquery.waypoints.min.js"
            th:src="@{/lib/waypoint/jquery.waypoints.min.js}"></script>
    <!-- prism 代码高亮js引用 -->
    <script src="../static/lib/prism/prism3.js" th:src="@{/lib/prism/prism.js}"></script>
    <!-- tocbot 目录生成js引用 -->
    <script src="../static/lib/tocbot/tocbot.js" th:src="@{/lib/tocbot/tocbot.js}"></script>
    <!-- 平滑移动scrollTo js引用 -->
    <script src="https://cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
    <!-- 音乐播放器js -->
    <script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/meting@1.2.0/dist/Meting.min.js"></script>
    <!-- aplayer音乐播放器 -->
    <div id="aplayerContent" class="aplayer" data-id="3778678" data-server="netease" data-type="playlist"
         data-fixed="true" data-autoplay="false" data-volume="0.6" data-theme="teal" data-order="list"
         data-preload="auto">
    </div>
    <!-- 局部页面刷新pjax js -->
    <script src="https://cdn.bootcss.com/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>
    <!--适配移动端和电脑端-->
    <script type="text/javascript">
        var browser = {
            versions: function () {
                var u = navigator.userAgent, app = navigator.appVersion;
                return {     //移动终端浏览器版本信息
                    trident: u.indexOf('Trident') > -1, //IE内核
                    presto: u.indexOf('Presto') > -1, //opera内核
                    webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                    gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
                    mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
                    ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                    android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
                    iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
                    iPad: u.indexOf('iPad') > -1, //是否iPad
                    webApp: u.indexOf('Safari') == -1 //是否web应用程序，没有头部与底部
                };
            }(),
            language: (navigator.browserLanguage || navigator.language).toLowerCase()
        }
        if (browser.versions.mobile) {
            //执行移动端的相关代码
            //alert("移动端");
            //设置移动端不显示网易云音乐插件
            /*      onload = function () {
                      var MusicDivShow = document.getElementById('netEasy-music');//获取指定div中的元素
                      MusicDivShow.style.display = 'none';//控制层隐藏
                  };*/
        } else if (!browser.versions.mobile) { //非移动端，动态加载js和div
            //设置电脑端显示网易云音乐插件
            onload = function () {
                /*var MusicDivShow = document.getElementById('netEasy-music');//获取指定div中的元素
                MusicDivShow.style.display = 'block';//控制层显示*/
            };

            // 富强，民主，文明，和谐。。。
            var script1 = document.createElement('script');
            script1.type = 'text/javascript';
            script1.src = '\\js\\click_show_text.js';

            // 鼠标跟随图案
            var script2 = document.createElement('script');
            script2.type = 'text/javascript';
            script2.color = '220,220,220';
            script2.opacity = '0.7';//透明度
            script2.zIndex = '-2';
            script2.count = '200';
            script2.src = '//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js';

            // 看板娘
            var script3 = document.createElement('script');
            script3.type = 'text/javascript';
            script3.src = '\\js\\autoload.js';

            $('body').append(script3);
            $('body').append(script1);
            $('body').append(script2);
        }
    </script>
</th:block>

</body>

</html>